<template>
  <!-- 页面全局配置 -->
  <view class="pageconfig">
    <!--vuetop-->
    <view @click="goTomian" class="flex1 response flex">
      <view class="flex2 flex">
        <text class="text3 text-white">编号</text>
        <text class="text4 text-white">{{ id }}</text>
      </view>
      <view @click="goToWifiDetails"  class="flex5 flex" style="flex-direction: column;">
        <text class="text6 text-white"></text>
        <text  class="text7 text-white">{{ currentWifi }}</text>
        <text class="text7 text-white">level {{ wifiSignalStrength }}</text>
      </view>
      <view @click="goToudp" class="flex8 flex">
        <text class="text9 text-white">{{ serverIp }}连接</text>
      </view>
    </view>

    <view class="flex10 response flex">
      <view class="flex11 flex">
				<text @click="goToAuPage" class="text12 text-white" :style="{ position: 'absolute', top: '12%', left: '10%' }">手动模式</text>
                <text class="text14 text-white" :style="{ position: 'absolute', top: '18%', left: '10%' }">目标速度：{{ msginfo && msginfo.speed !== undefined ? msginfo.speed + '  m/s' : 'none' }}</text>
                <text class="text15 text-white" :style="{ position: 'absolute', top: '21%', left: '10%' }">温度：{{ msginfo && msginfo.tem !== undefined ? msginfo.tem + ' ℃' : 'none' }}</text>
                <text class="text16 text-white" :style="{ position: 'absolute', top: '24%', left: '10%' }">电量：{{ msginfo && msginfo.bLevel !== undefined ? msginfo.bLevel + ' %' : 'none' }}</text>
                <text class="text17 text-white" :style="{ position: 'absolute', top: '27%', left: '10%' }">
				位置：{{ msginfo && msginfo.x !== undefined ? msginfo.x + ' m' : 'none' }},{{ msginfo && msginfo.y !== undefined ? msginfo.y + ' m' : 'none' }}</text>
				<text class="text16 text-white" :style="{ position: 'absolute', top: '27%', left: '45%' }">实际速度：{{ msginfo && msginfo.v !== undefined ? msginfo.v + ' m/s' : 'none' }}</text>
				<text class="text16 text-white" :style="{ position: 'absolute', top: '18%', left: '45%' }">倾角：{{ msginfo && msginfo.a !== undefined ? msginfo.a + ' rad' : 'none' }}</text>
				<text class="text16 text-white" :style="{ position: 'absolute', top: '21%', left: '45%' }">转角：{{ msginfo && msginfo.d !== undefined ? msginfo.d + ' rad' : 'none' }}</text>
				<text class="text15 text-white" :style="{ position: 'absolute', top: '24%', left: '45%' }">里程：{{ msginfo && msginfo.s !== undefined ? msginfo.s + '  m' : 'none' }}</text>
				<div>
				<div :style="{ position: 'absolute', top: '15%', left: '76%', display: 'flex', alignItems: 'center' }">
				  <text class="text text-white">电机</text>
				  <div :style="{ ...getCircleStyle(status.motor), marginLeft: '5px' }"></div>
				</div>

				<div :style="{ position: 'absolute', top: '18%', left: '76%', display: 'flex', alignItems: 'center' }">
				  <text class="text text-white">气泵</text>
				  <div :style="{ ...getCircleStyle(status.pump), marginLeft: '5px' }"></div>
				</div>

				<div :style="{ position: 'absolute', top: '21%', left: '76%', display: 'flex', alignItems: 'center' }">
				  <text class="text text-white">阀门</text>
				  <div :style="{ ...getCircleStyle(status.valve), marginLeft: '5px' }"></div>
				</div>

				<div :style="{ position: 'absolute', top: '24%', left: '76%', display: 'flex', alignItems: 'center' }">
				  <text class="text text-white">滚刷</text>
				  <div :style="{ ...getCircleStyle(status.brush), marginLeft: '5px' }"></div>
				</div>

				<div :style="{ position: 'absolute', top: '27%', left: '76%', display: 'flex', alignItems: 'center' }">
				  <text class="text text-white">舵机</text>
				  <div :style="{ ...getCircleStyle(status.servo), marginLeft: '5px' }"></div>
				</div>
				</div>
      </view>
    </view>

     <view class="flex17 response flex">
          <button :style ="{ position: 'absolute', left: '52%', backgroundColor: pumpColor, width: '30px', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }"
            @click="toggleCommand('pump')"class="text99 text-white">气泵</button>
    
          <button :style ="{position: 'absolute', left: '62%', backgroundColor: valveColor, width: '30px', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }"
            @click="toggleCommand('valve')"class="text99 text-white">阀门</button>
    
          <button :style ="{position: 'absolute', left: '72%', backgroundColor: brushColor, width: '30px', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }"
            @click="toggleCommand('brush')" class="text99 text-white">滚刷</button>
    
          <button :style ="{position: 'absolute', left: '82%', backgroundColor: servoColor, width: '30px', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }"
            @click="toggleCommand('servo')" class="text99 text-white">舵机</button>
        </view>
    <view class="flex21 response flex" style="position: relative;">
      <button @click="toggleButtonColor(1)" :style="{ backgroundColor: buttonColors[1], position: 'absolute', top: '15%', left: '20%' , width: '40px'}" class="text22 text-white">前</button>
      <button @click="toggleButtonColor(2)" :style="{ backgroundColor: buttonColors[2], position: 'absolute', top: '105%', left: '20%' , width: '40px'}" class="text23 text-white">后</button>
      <button @click="toggleButtonColor(3)" :style="{ backgroundColor: buttonColors[3], position: 'absolute', top: '60%', left: '7%' , width: '40px'}" class="text24 text-white">左</button>
      <button @click="toggleButtonColor(4)" :style="{ backgroundColor: buttonColors[4], position: 'absolute', top: '60%', left: '34%' , width: '40px'}" class="text25 text-white">右</button>
      <button @click="toggleButtonColor(26)" :style="{ backgroundColor: buttonColors[26], position: 'absolute', top: '15%', left: '75%', width: '50px' }" class="text26 text-white">启动</button>
      <button @click="toggleButtonColor(0)" :style="{ backgroundColor: buttonColors[0], position: 'absolute', top: '60%', left: '75%' , width: '50px'}" class="text27 text-white">停止</button>
      <button @click="toggleButtonColor(-2)" :style="{ backgroundColor: buttonColors[-2], position: 'absolute', top: '105%', left: '75%', width: '50px' }" class="text28 text-white">清扫</button>
      <view>
        <button @click="adjustSpeed(1.1);sendCommand(21)"  :style="{ backgroundColor: buttonColors[21], position: 'absolute', top: '45%', left: '55%', width: '40px' }"  class="text28 text-white">+</button>
        <button @click="adjustSpeed(0.9);sendCommand(22)"  :style="{ backgroundColor: buttonColors[22], position: 'absolute', top: '95%', left: '55%', width: '40px' }" class="text28 text-white">-</button>
      </view>
    </view>

    <view class="rj-joystick-container" id="rj-joystick" :style="{ width: outerRadius * 2 + 'px', height: outerRadius * 2 + 'px'}">
      <view class="outer-view" :style="{ width: outerRadius * 2 + 'px', height: outerRadius * 2 + 'px'}">
        <text v-for="n in 4" :key="n" class="control-direction cuIcon-right lg text-gray"></text>
        <view class="inner-view" :class="{ 'un-move': !isMoving }" :style="{ width: innerRadius * 2 + 'px', height: innerRadius * 2 + 'px', left: innerLeft + 'px', top: innerTop + 'px'}"
             @touchmove="onJoystickMove" @touchend="joystickRestore" @touchstart="onMoveStart">
        </view>
      </view>
    </view>
	
    <view class="command-info">
		
      <text>遥感角度：{{ angle }}°</text>
      <text>指令：{{ directionName }}</text>
    </view>
    <view class="jsonmsg-display" style="white-space: normal; word-wrap: break-word;">
      <text>jsonmsg: {{ JSON.stringify(msginfo) }}</text> 
    </view>
	<view class="jsonmsg-display" style="white-space: normal; word-wrap: break-word;">
	  <text>send: {{ JSON.stringify(jsonMessage) }}</text> 
	</view>
       <div class="container">
           <button @click="handleButtonClick" class="lock-button" :class="{'black-button': isLocked, 'gray-button': !isLocked}">
               {{ isLocked ? '🔐' : '🔓' }}
           </button>
       </div>
	   <view class="custom-tab-bar">
	     <view @click="switchTab('index')" class="tab-item">主页面</view>
	     <view @click="switchTab('wifiDetails')" class="tab-item">wifi</view>
	     <view @click="switchTab('server')" class="tab-item">UDP</view>
	   </view>
  </view>

</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  data() {
    return {
      id: '',
      temperature: 0,
      jsonmsgContent: '', 
      jsonString: '',
	  parsedContent: '', 
      batteryLevel: 100,
      positionXY: { x: 0, y: 0 },
      wifiSignalStrength: 0,
      currentIp: '192.168.0.169',
	  isLocked: false, // 新增锁定状态
      newIp: '',
      currentWifi: 'namenone',
      receivedMessages: [], // 用于存储收到的消息
      angle: '', // 旋转角度
      resData: [],
      direction: '', // 旋转方向
      innerLeft: 0, // 操纵杆内圈的原始left值
      innerTop: 0, // 操纵杆内圈的原始top值
      isMoving: false, // 是否正在移动
      timer: null, // 计时器
      speed: 0.4, // 初始速度
	  msginfo: 'udp is close' ,
	  jsonMessage: null ,
      status: {
        motor: null, // or 1 or null
        pump: null, // or 1 or null
        valve: null, // or 1 or null
        brush: null, // or 1 or null
        servo: null, // initial value, can be updated as needed
      },
      directionName: '', // 发送的指令名称
      //rollerColor: 'red',
      //valveColor: 'red',
      //servoColor: 'red',
      //pumpColor: 'red',
	  brushColor: 'red',
      commands: {
        brush: 10,
        valve: 12,
        servo: 14,
        pump: 16
      },
	  brushToggleState: false ,// 用于跟踪 brush 命令的切换状态
      buttonColors: {
        1: 'rgba(45,140,240,1)', // 前
        2: 'rgba(45,140,240,1)', // 后
        3: 'rgba(45,140,240,1)', // 左
        4: 'rgba(45,140,240,1)', // 右
        9: 'rgba(45,140,240,1)', // 启动
        0: 'rgba(45,140,240,1)', // 停止
        '-2': 'rgba(45,140,240,1)' // 清扫
      }
    }
  },
  props: {
    // 操纵杆外圈半径
    outerRadius: {
      type: Number,
      default: 70
    },
    // 操纵杆内圈半径
    innerRadius: {
      type: Number,
      default: 37
    },
    
  },
  computed: {
    ...mapState({
      udpMessages: state => state.udpMessages, // 从 Vuex 中获取 udpMessages
    serverIp: state => state.serverIp,
	}),
	pumpColor() {
	      return this.status.pump ? 'green' : 'red';
	    },
	    valveColor() {
	      return this.status.valve ? 'green' : 'red';
	    },

	    servoColor() {
	      return this.status.servo ? 'green' : 'red';
	    },
		//
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#rj-joystick').boundingClientRect(data => {
      this.outerLeft = data.left; // 获取操作杆距离页面左边界的距离
      this.outerTop = data.top; // 获取操作杆距离页面上边界的距离
      this.centerX = data.left + this.outerRadius; // 中心点的X坐标
      this.centerY = data.top + this.outerRadius; // 中心点的Y左边
      this.innerLeft = this.outerRadius - this.innerRadius;
      this.innerTop = this.outerRadius - this.innerRadius;
    }).exec();
	    if (this.msginfo) {
	      this.updateStatusFromMsgInfo();
	    } else {
	      console.info("msginfo is not defined");
	    }
  },
  watch: {
    msginfo: {
      handler() {
        this.updateStatusFromMsgInfo();
      },
      deep: true,
    },
    udpMessages: {
      handler(newMessages) {
            if (newMessages.length) {
              this.jsonmsgContent = newMessages[newMessages.length - 1];
              this.processJsonMsg(); 
            }
          },
      deep: true,
      immediate: true, // 页面加载时立即执行一次 handler
    },
    jsonmsgContent: { // 新增对 jsonmsgContent 的监视
      handler(newContent) {
        if (newContent) {
          this.processJsonMsg(); // 当 jsonmsgContent 变化时调用 processJsonMsg
        }
      },
      immediate: true,
    },
  },
  onLoad(options) {
      if (options && options.id) {
          this.id = options.id;
      }
  
      if (options && options.newIp) {
          this.newIp = options.newIp ? options.newIp : this.currentIp;
      } else {
          this.newIp = this.currentIp;
      }
	  this.startWifi();
  },
  methods: {
	      switchTab(pagePath) {
	        uni.switchTab({
	          url: `/pages/index/${pagePath}`
	        });},
	  ...mapActions([
	    'updateServerIp',

	  ]),
	 async handleButtonClick(e) {
	              this.toggleLock(e); // 将事件对象传递给 toggleLock
	          },
	          toggleLock(e) {
	              this.isLocked = !this.isLocked; // 切换锁定状态
	              if (!this.isLocked) {
	                  this.joystickRestore(e); // 只有在解锁时调用 joystickRestore
	              }
	          },
    async updateStatusFromMsgInfo() {
            if (this.msginfo) {
              this.status.motor = this.msginfo.motor;
              this.status.pump = this.msginfo.pump;
              this.status.valve = this.msginfo.valve;
              this.status.brush = this.msginfo.brush;
              this.status.servo = this.msginfo.servo; 
            }
    },
	startWifi() {
	    uni.startWifi({
	        success: () => {
	            this.getConnectedWifi();
	        },
	        fail: (err) => {
	            console.error("启动 WiFi 模块失败:", err);
	        }
	    });
	},
    getCircleStyle(value) {
      let color;
      if (value === 0) {
        color = 'red';
      } else if (value === 1 || value === 255) { // servo can have 255 for green
        color = 'green';
      } else if (value === null || value === undefined) {
        color = 'gray';
      } else {
        color = 'yellow';
      }
      return {
        width: '10px',
        height: '10px',
        backgroundColor: color,
        borderRadius: '50%',
        display: 'inline-block',
      };
    },
	        async toggleCommand3(type) {
	          let command;
	      
	          if (type === 'brush') {
	            // 切换 brush 按钮的颜色和命令
	            if (this.brushColor === 'red') {
	              this.brushColor = 'green'; // 切换颜色为绿色
	              command = this.commands[type]; // 发送默认命令
	            } else {
	              this.brushColor = 'red'; // 切换颜色为红色
	              command = this.commands[type] + 1; // 发送默认命令 + 1
	            }
	          } else {
	            // 其他类型按钮根据颜色判断
	            let currentColor;
	            switch (type) {
	              case 'pump':
	                currentColor = this.pumpColor;
	                break;
	              case 'valve':
	                currentColor = this.valveColor;
	                break;
	              case 'servo':
	                currentColor = this.servoColor;
	                break;
	              default:
	                currentColor = 'red'; // 默认值，可以调整
	            }
	      
	            if (currentColor === 'red') {
	              command = this.commands[type]; // 发送红色对应的命令
	            } else if (currentColor === 'green') {
	              command = this.commands[type] + 1; // 发送绿色对应的命令
	            } else {
	              console.warn('未知的颜色状态');
	              return; // 如果颜色状态未知，则退出
	            }
	          }
	          // 发送命令
	          this.sendCommand(command);
	        },
	async toggleCommand2(type) {
		      // 切换状态：假设 null 表示未启用，1 表示启用，点击后状态在 1 和 null 之间切换
		      this.status[type] = this.status[type] === 1 ? null : 1;
		      
		      // 根据状态发送相应的指令
		      const command = this.status[type] === 1 ? this.commands[type] : this.commands[type] + 1;
		      
		    this.sendCommand(command);
		    },
	async toggleCommand1(type) {
		  if (this[type + 'Color'] === 'red') {
			this[type + 'Color'] = 'green';
			this.sendCommand(this.commands[type]);
		  } else {
			this[type + 'Color'] = 'red';
			this.sendCommand(this.commands[type] + 1);
		  }
		},
	async  toggleCommand(type) {
	   // 如果当前按钮是绿色，恢复所有命令颜色为红色
	   if (this[type + 'Color'] === 'green') {
	     this.rollerColor = 'red';
	     this.valveColor = 'red';
	     this.servoColor = 'red';
	     this.pumpColor = 'red';
	     this[type + 'Color'] = 'red'; // 恢复当前按钮颜色为红色
	     this.sendCommand(this.commands[type] + 1); // 发送停止命令
	   } else {
	     // 否则，设置当前按钮为绿色
	     this.rollerColor = 'red';
	     this.valveColor = 'red';
	     this.servoColor = 'red';
	     this.pumpColor = 'red';
	     this[type + 'Color'] = 'green'; // 选中按钮变为绿色
	     this.sendCommand(this.commands[type]); // 发送命令
	   }
	 },
    async processJsonMsg() {
      // 将 jsonmsgContent 转换为字符串
      const jsonString = JSON.stringify(this.jsonmsgContent, null, 2);
      this.jsonString = jsonString; 
      const parsedContent = JSON.parse(jsonString); // 解析为对象
	  this.parsedContent = parsedContent; 
      if (parsedContent.msg) {
        const msgContent = JSON.parse(parsedContent.msg); 
        const msginfo = msgContent.info; 
        this.msginfo = msginfo;
      } 
    },
    getConnectedWifi() {
      uni.getConnectedWifi({
        success: (res) => {
          if (res.wifi) {
            this.currentWifi = res.wifi.SSID;
            this.wifiSignalStrength = this.calculateWifiSignalLevel(res.wifi.signalStrength);
          }
        },
        fail: (err) => {
          console.error("Failed to get connected WiFi", err);
        }
      });
    },
    adjustSpeed(factor) {
      this.speed *= factor; // 根据因子调整速度
    },
    async toggleButtonColor(command) {
      Object.keys(this.buttonColors).forEach(key => {
        this.buttonColors[key] = 'rgba(45,140,240,1)'; // 恢复默认颜色
      });
      
      // 设置当前按钮的颜色
      this.buttonColors[command] = 'green'; // 选中按钮变为绿色
      this.sendCommand(command); 
    },
    async calculateWifiSignalLevel(signalStrength) {
      return Math.round((signalStrength / 100) * 5); 
    },
    async sendCommand(command) {
      const jsonMessage1 = {
        MT: {
          dControl: command
        }
      };
      const jsonMessage= {
		port:9091,
        manual: command
        
      };
	  this.jsonMessage=jsonMessage;
      this.$store.commit('sendmsg', jsonMessage);
	  console.log(jsonMessage);
      // 显示发送的角度和指令名称
      let directionName = '';
      switch (command) {
        case 1: directionName = '上'; break;
        case 2: directionName = '下'; break;
        case 3: directionName = '右'; break;
        case 4: directionName = '左'; break;
        case 5: directionName = '右下'; break;
        case 6: directionName = '左下'; break;
        case 7: directionName = '左上'; break;
        case 8: directionName = '右上'; break;
        case 26: directionName = '启动'; break;
        case 0: directionName = '停止'; break;
        case -2: directionName = '清扫'; break; // 修正为 -2
        default: directionName = ''; break;
      }
      
      // 更新界面显示
      this.angle = this.angle; // 计算角度
      this.directionName = directionName; // 更新指令名称
    },
    goToAuPage() {
      uni.navigateTo({
        url: `/pages/index/auto?id=${this.id}&newIp=${this.newIp}`
      });
    },
    goToWifiDetails() {
      uni.switchTab({
        url: `/pages/index/wifiDetails?id=${this.id}&currentIp=${this.newIp}`
      });
    },
    goTomian() {
      uni.switchTab({
        url: `/pages/index/index`
      });
    },
	goToudp() {
	    uni.switchTab({
	        url: `/pages/index/server?id=${this.id}`
	    });
	},
    // 拖动操纵杆时的操作
    onMoveStart(e) {
        e.preventDefault(); // 阻止默认事件
        this.isMoving = true;
    },

   async onJoystickMove(e) {
        e.preventDefault(); // 阻止默认事件
        const { clientX, clientY } = e.touches[0];
        let diffX = clientX - this.centerX;
        let diffY = clientY - this.centerY;
        let edge = Math.sqrt(diffX * diffX + diffY * diffY);
        this.isMoving = true;
        let sensitivityRatio = 0.5;
        if (edge <= this.outerRadius) {
            this.innerLeft = Math.round(clientX - this.outerLeft - this.innerRadius);
            this.innerTop = Math.round(clientY - this.outerTop - this.innerRadius);
        } else {
            let ratio = this.outerRadius / edge;
            diffX *= ratio * sensitivityRatio;
            diffY *= ratio * sensitivityRatio;
        }
        // 计算角度和发送方向
        this.getDirection(diffX, diffY);
    },
    // 计算操纵杆的方向
    async getDirection(diffX, diffY) {
      let angle = Math.atan2(diffY, diffX) * 180 / Math.PI;
      if (angle < 0) angle += 360;

      let direction = 0;
      let directionName = '';

      if (angle >= 337.5 || angle < 22.5) {
        direction = 4; // 上
        directionName = '右';
      } else if (angle >= 22.5 && angle < 67.5) {
        direction = 8; // 右上
        directionName = '右下';
      } else if (angle >= 67.5 && angle < 112.5) {
        direction = 2; // 右
        directionName = '下';
      } else if (angle >= 112.5 && angle < 157.5) {
        direction = 7; // 右下
        directionName = '左下';
      } else if (angle >= 157.5 && angle < 202.5) {
        direction = 3; // 左
        directionName = '左';
      } else if (angle >= 202.5 && angle < 247.5) {
        direction = 6; // 左下
        directionName = '左上';
      } else if (angle >= 247.5 && angle < 292.5) {
        direction = 1; // 上
        directionName = '上';
      } else if (angle >= 292.5 && angle < 337.5) {
        direction = 7; // 左上
        directionName = '右上';
      } else if (angle === undefined || angle === null || isNaN(angle) || angle === 0) {
        direction = 0; // 停止
        directionName = '停止';
      }
      // 更新 Vue 实例的数据属性
      this.angle = angle.toFixed(2); // 保留两位小数
      this.directionName = directionName;

      if (this.direction !== direction) {
        this.direction = direction;
        this.sendCommand(direction);
      }
    },
    // 操纵杆复位
    async joystickRestore(e) { // 添加事件参数 e
        e.preventDefault(); // 阻止默认事件
            // 检查锁定状态
            if (!this.isLocked) { // 只有在未锁定时才发送停止命令
			this.isMoving = false;
			this.innerLeft = this.outerRadius - this.innerRadius;
			this.innerTop = this.outerRadius - this.innerRadius;
			this.angle = ''; // Reset angle to an empty string
			this.directionName = '停止'; // Set direction to '停止' (Stop)
                this.sendCommand(0); // 发送停止命令
            }
    },
  },
  onUnload() {
    // 组件卸载时释放资源
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>



<style lang="less">


/**
 *
 此处必须引用colorui样式,并放入根目录，css样式可以这样写
	@import "colorui/main.css";
	@import "colorui/icon.css";

 如需要引用colorui到全局，
 需要在App.vue 引入
 	@import "colorui/main.css";
	@import "colorui/icon.css";
 *
 */


body {
    overflow: hidden;
}
	
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
}
.tab-item {
  padding: 10px;
  text-align: center;
}
	/**本页全局配置的代码**/
.pageconfig
{
		width:  100%;
		overflow:  hidden;
		overflow-y:  scroll;
height: 100%; /* 你可以尝试 height: 100% 代替 100vh */;}



 /**pagedomcss**/



.lock-button {
	    position: absolute; /* 使用绝对定位 */
	    top: 58%; /* 垂直居中 */
	left: 5%; 
    width: 30px; /* 按钮宽度 */
    height: 30px; /* 按钮高度 */
    border-radius: 50%; /* 使按钮成为圆形 */
    border: none; /* 去掉边框 */
    display: flex; /* 使用 flexbox 方便居中 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    font-size: 24px; /* 图标大小 */
    cursor: pointer; /* 鼠标指针样式 */
    transition: background-color 0.3s; /* 背景色过渡效果 */
}

.black-button {
    background-color: black; /* 锁定状态背景色 */
    color: white; /* 锁定状态文字颜色 */
}

.gray-button {
    background-color: gray; /* 解锁状态背景色 */
    color: white; /* 解锁状态文字颜色 */
}
 .flex1
{
		width: 100%;
		align-items: flex-start;
		border-radius: 5px; /* 添加圆角 */
}.flex2
{
		width: 26%;
		height: 120rpx;
		background-color: rgba(45,140,240,1);
		margin-left: 30rpx;
		align-items: flex-start;
}.text3
{
		margin-left: 30rpx;
}.text4
{
		margin-top: 50rpx;
		margin-bottom: 16rpx;
		margin-left: -16rpx;
}.flex5
{
		width: 28%;
		height: 120rpx;
		background-color: rgba(45,140,240,1);
		margin-left: 30rpx;
		align-items: flex-start;
		border-radius: 5px; /* 添加圆角 */
}.text6
{
		margin-left: 34rpx;
}.text7
{
		margin-top: 20rpx;
		margin-left: 20rpx;
		font-size: 10px; 
}.flex8
{
		width: 27%;
		height: 120rpx;
		background-color: rgba(45,140,240,1);
		margin-left: 30rpx;
		align-items: flex-start;
		border-radius: 5px; /* 添加圆角 */
}.text9
{
		margin-top: 36rpx;
		margin-left: 10rpx;
}.flex10
{
		width: 100%;
		height: 320rpx;
		align-items: flex-start;
		border-radius: 5px; /* 添加圆角 */
}.flex11
{
		width: 87%;
		height: 320rpx;
		background-color: rgba(45,140,240,1);
		margin-top: 32rpx;
		margin-left: 36rpx;
		align-items: flex-start;
		border-radius: 5px; /* 添加圆角 */
}.text12
{
		width: 38%;
		font-weight: 600;
}.text13
{
		
		
}.text14
{
		
		
}.text15
{
		
		
}.text16
{
		
		
}.flex17
{
		width: 100%;
		height: 120rpx;
		align-items: flex-start;
		border-radius: 5px; /* 添加圆角 */
}.text18
{
		background-color: rgba(45,140,240,1);
		margin-top: 80rpx;
		margin-left: 80rpx;
}.text19
{
		background-color: rgba(45,140,240,1);
		margin-top: 80rpx;
		margin-left: 352rpx;
}.onebutton20
{
		margin-top: 60rpx;
		margin-left: -340rpx;
}.flex21
{
		width: 100%;
		height: 210rpx;
		align-items: flex-start;
		border-radius: 8px; /* 添加圆角 */
}.text99
{
		background-color: rgba(45,140,240,1);
		font-size: 10px; /* 这里调整字体大小 */
		width: 10%;
		margin-top: 500rpx;
		margin-left: -20rpx;
}
.text22, .text23, .text24, .text25, .text26, .text27, .text28 {
  position: absolute; /* 绝对定位 */
  font-size: 15px; /* 字体大小 */
  background-color: rgba(45, 140, 240, 1); /* 按钮背景颜色 */
  color: white; /* 字体颜色 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 添加圆角 */
  padding: 0rpx; /* 内边距 */
  cursor: pointer; /* 鼠标悬停时显示为手型 */
}

/* 具体按钮位置 */
.text22 { top: 40%; left: 40%; } /* 前 */
.text23 { top: 70%; left: 40%; } /* 后 */
.text24 { top: 50%; left: 20%; } /* 左 */
.text25 { top: 50%; left: 60%; } /* 右 */
.text26 { top: 90%; left: 40%; } /* 启动 */
.text27 { top: 90%; left: 20%; } /* 停止 */
.text28 { top: 90%; left: 60%; } /* 清扫 */
.flex29
{
		width: 87%;
		background-color: rgba(45,140,240,1);
		margin-top: 12rpx;
		margin-left: 36rpx;
		align-items: flex-start;
		border-radius: 5px; /* 添加圆角 */
}
.text30
{
  background-color: rgba(45,140,240,1);
  margin-top: 10rpx; /* 调整为合理的值 */
  margin-left: 10rpx;
}
.text31
{
  background-color: rgba(45,140,240,1);
  margin-top: 20rpx; /* 调整为合理的值 */
  margin-left: 10rpx;
  border-radius: 5px; /* 添加圆角 */
}
  .rj-joystick-container {
    display: flex;
	margin-left: 60rpx;
	margin-top: 120rpx;
    justify-content: center;
    align-items: center;
    position: relative;
touch-action: none; /* 禁用默认触摸行为 */
    .outer-view {
      background: rgb(227, 232, 233);
      position: relative;
      border-radius: 50%;
      box-sizing: border-box;
      box-shadow: 0 0 5rpx rgb(213, 218, 219) inset;
      border: 1px solid #fff;

      .inner-view {
        background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(234, 244, 254));
        position: absolute;
        border-radius: 50%;
        box-shadow: 0 0 16rpx rgb(213, 218, 219);
        border: 1px solid rgb(217, 221, 228);
        box-sizing: border-box;
      }

      .un-move {
        transition: all .4s;
      }

      .control-direction {
        position: absolute;
        font-size: 43rpx;
        color: #bbb;
        width: 50%;
        height: 70rpx;
        top: calc(50% - 35rpx);
        left: 50%;
        text-align: right;
        line-height: 70rpx;
        padding-right: 13rpx;
        display: block;
        box-sizing: border-box;
        transform-origin: 0 50%;
      }
.command-info {
  /* 显示发送的角度和指令名称的样式 */
}
      text {
        &:nth-child(0) {
          transform: rotate(0deg);
        }

        &:nth-child(1) {
          transform: rotate(90deg);
        }

        &:nth-child(2) {
          transform: rotate(180deg);
        }

        &:nth-child(3) {
          transform: rotate(270deg);
        }
      }
    }
  }
</style>
